<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务系统--考试编辑</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--extended-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <link rel="stylesheet" href="/plugin/it/common/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/zTree/js/jquery.ztree.all.js" charset="utf-8"></script>
</head>
<style>
    .Right {
        width: 100%;
        overflow-y: scroll;
    }

    .screening ul li:nth-child(1) select, .screening ul li:nth-child(3) select, .screening ul li:nth-child(6) select {
        width: 30%;
    }

    .layui-form-item .layui-inline {
        margin-right: 0;
    }

    layui-form-label {
        padding: 9px 0;
    }

    .myDataCentere ul li label {
        width: 26%;
    }

    .screening ul li input {
        padding-left: 1%;
        border: 1px solid #DDDDDD;
    }

    .upCard {
        width: auto;
        height: auto;
    }

    .upCard img {
        margin: 20px 40px;
    }

    .layui-breadcrumb a:hover {
        color: #5775EF !important;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: #5775EF;
    }

    .layui-btn-normal {
        background: #5775EF;
    }

    .layui-form-select dl dd.layui-this {
        background-color: #5775EF;
    }
</style>

<body>
<!--头部-->
<div style="background-color: #F1F4FB;padding-left: 20px;">
    <span class="layui-breadcrumb" lay-separator=">">
        <a><cite>考试管理</cite></a>
        <a href="/exam/list/index"><cite>考试列表</cite></a>
        <a href="#"><cite>修改考试</cite></a>
    </span>
</div>
<!--容器-->
<div class="container clearfix">
    <!--右侧内容-->
    <div class="Right fr">
        <div class="screening screeningOne whitebg clearfix myData whitebg" style="margin-top: 0;">
            <form class="layui-form" enctype="multipart/form-data">
                <div class="bold">考试设置</div>
                <div class="myDataCentere myDataCentereTwo mt30 fl">
                    <input type="hidden" id="examId" name="examId" value="${ex.examId}">
                    <ul class="clearfix fl" style="width: 100%;">
                        <li class="clearfix" id="edu_li">
                            <label class="fl w8p">上传封面:</label>
                            <label>
                                <div class="fl clearfix">
                                    <div class="upCard fl mt10" style="margin-left:55px">
                                        <img src="${re.contextPath}/plugin/common/images/57@2x.png" alt="">
                                        <button type="button" lay-data="{type: '0819',imgid: 'imgid-0-1'}"
                                                class="gr_upload whitebutton ml20"
                                                style="padding-left:12px;display: none;"></button>
                                    </div>
                                </div>
                            </label>
                            <div class="mt10 ml20 fl">
                                <#if "${file}" !="${null}">
                                    <img id="imgid-0-1" class="layui-upload-img edu_img cursor"
                                         style="margin:20px 40px;border-radius: 0;"
                                         src="${file.url}" onclick="showImg(this)">
                                <#else>
                                    <img id="imgid-0-1" style="display: none;border-radius: 0;margin:20px 40px;"
                                         class="layui-upload-img edu_img cursor"
                                         onclick="showImg(this)">
                                </#if>
                            </div>
                        </li>
                    </ul>
                    <ul class="fl" style="width: 100%;">
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>考试分类:</label>
                            <div style="width: 42% !important;float: left;">
                                <select id="category" name="category" lay-verify="required">
                                    <#list ksfl as vo>
                                        <option value="${vo.badtCode}"
                                                <#if (ex.category)??>
                                                    <#if (ex.category) ==(vo.badtCode)>
                                                        selected=selected
                                                    </#if>
                                                </#if>
                                        >${vo.badtName}
                                        </option>
                                    </#list>
                                </select>
                            </div>
                        </li>
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>考试名称:</label>
                            <input type="text" style="border:1px solid #DDDDDD;width: 40%" name="examName" id="examName"
                                   value="${ex.examName}" lay-verify="required" placeholder="请输入考试名称">
                        </li>

                    </ul>
                    <ul class="fl" style="width: 100%;">
                        <#--                        <li style="width: 50%">-->
                        <#--                            <label style="width: 20%;float: left;"><span class="red">*</span>重复考试:</label>-->
                        <#--                            <div style="width: 42% !important;float: left;">-->
                        <#--                                <select name="reuse" id="reuse" lay-verify="required">-->
                        <#--                                    <option value="1">是</option>-->
                        <#--                                    <option value="0">否</option>-->
                        <#--                                </select>-->
                        <#--                            </div>-->
                        <#--                        </li>-->
                        <li style="width: 50%">
                            <label class="" style="width: 20%;float: left;"><span class="red">*</span>考试模式:</label>
                            <div style="width: 42% !important;float: left;">
                                <select name="type" id="type" lay-verify="required">
                                    <option value="">选择考试模式</option>
                                    <#list ksms as vo>
                                        <option value="${vo.badtCode}"
                                                <#if (ex.type)??>
                                                    <#if (ex.type) ==(vo.badtCode)>
                                                        selected=selected
                                                    </#if>
                                                </#if>
                                        >${vo.badtName}
                                        </option>
                                    </#list>
                                </select>
                            </div>
                        </li>
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>及格分数:</label>
                            <input type="text" style="border:1px solid #DDDDDD;width: 40%" name="passScore"
                                   oninput="enterScore(this)"   id="passScore" value="${ex.passScore}" placeholder="请输入" oninput="enterScore()" lay-verify="required">
                        </li>
                    </ul>
                    <ul class="fl" style="width: 100%;">
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>开始时间:</label>
                            <input type="text" name="startTime" id="startDate" onchange="ks()"
                                   style="border:1px solid #DDDDDD;width: 40%" value="${ex.startTime}"
                                   lay-verify="required" placeholder="请选择开始日期">
                        </li>
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>结束时间:</label>
                            <input type="text" name="endTime" id="endDate" style="border:1px solid #DDDDDD;width: 40%"
                                   onchange="js()"
                                   value="${ex.endTime}" lay-verify="required" placeholder="请选择结束日期">
                        </li>
                    </ul>
                    <ul class="fl" style="width: 100%;">
                        <li style="width: 50%">
                            <label style="width: 20%;float: left;"><span class="red">* </span>考试时长:</label>
                            <input type="text" name="totalTime" style="border:1px solid #DDDDDD;width: 40%"
                                   oninput="enterScore(this)"  id="totalTime" value="${ex.totalTime}" placeholder="请输入" lay-verify="required">分钟
                        </li>
                        <li style="width: 50%;padding-block: 1%;"></li>
                    </ul>
                </div>
                <div class="bold">信息描述</div>
                <ul class="clearfix" style="width: 100%;">
                    <textarea id="content" lay-verify="content" name="content"
                              style="display: none;">${ex.content}</textarea>
                </ul>

                <div class="bold" style="margin-top: 30px;">试卷</div>
                <div style="width: 100%;">
                    <div style="width: 100%;text-align: right">
                        <#if "${ex.status}"=="001">
                            <button type="button" lay-submit class="layui-btn layui-btn-normal bluebg white ft18 "
                                    onclick="addPaper()">添加试卷
                            </button>
                        </#if>
                    </div>
                    <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
                </div>
                <div class="bold" style="margin-top: 30px;">考试人员</div>
                <div style="width: 100%;">
                    <div style="text-align: right">
                        <#if ("${ex.status}"=="002" || "${ex.status}"=="001")>
                            <button type="button" lay-submit class="layui-btn layui-btn-normal bluebg white ft18 "
                                    onclick="addUser()">添加
                            </button>
                        </#if>
                    </div>
                    <table id="tableUserList" class="layui-hide" lay-filter="tableList"></table>
                </div>

                <div class="releaseBtn center" style="margin: 10px 0;">
                    <button type="button" class="layui-btn layui-btn-normal white ft18 close">返回</button>
                    <#if "${ex.status}"=="001">
                        <button type="submit" lay-submit lay-filter="save"
                                class="layui-btn layui-btn-normal bluebg white ft18 " id="btnsave">保存
                        </button>
                        <button type="submit" lay-submit lay-filter="submit"
                                class="layui-btn layui-btn-normal bluebg white ft18" id="btnsubmit">提交
                        </button>
                    </#if>
                </div>
            </form>

        </div>

    </div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/html" id="toolBarRow">
    {{#  if("${ex.status}" =="001"){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="delPaper" style="margin-left: 0;">删除</a>
    {{# } }}
</script>
<script type="text/html" id="toolBarRows">
    {{#  if("${ex.status}" =="001"){ }}
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="delUser" style="margin-left: 0;">删除</a>
    {{# } }}
</script>
<script type="text/javascript">
    var layer;
    var form;
    var table = null;
    var tableIns = null;
    var tableUserIns = null;
    var layedit;
    var laydate;
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    var element = "";
    var startTime = "";
    var endTime = "";
    layui.use(['element', 'laydate', 'layedit', 'form', 'upload'], function () {
        element = layui.element;
        upload = layui.upload
        form = layui.form;
        form.render();
        layedit = layui.layedit;
        laydate = layui.laydate;
        var content = layedit.build('content',{
            tool: [ 'strong','italic','underline','del', '|','left', 'center', 'right']
        });//建立编辑器
        //开始时间
        laydate.render({
            elem: '#startDate',
            type: 'datetime',
            trigger: 'click',
            position: 'absolute',
            done: function (value, date, endDate) {
                var current_time = value; //得到日期生成的值，如：2017-08-18
                var stop_time = $("#endDate").val();
                if (current_time && stop_time) {
                    if (!CompareDate(current_time, stop_time)) {
                        layer.msg("日期范围不正确！", {icon: 2});
                        start.config.max = {
                            year: 1900,

                            month: 0, //关键

                            date: 1
                        }
                    }
                }
            }
        });
        //结束时间
        laydate.render({
            elem: '#endDate',
            type: 'datetime',
            trigger: 'click',
            position: 'absolute',
            done: function (value, date, endDate) {
                var current_time = $("#startDate").val();
                var stop_time = value;
                if (current_time && stop_time) {
                    if (!CompareDate(current_time, stop_time)) {
                        layer.msg("日期范围不正确！", {icon: 2});
                        start.config.max = {
                            year: 1900,

                            month: 0, //关键

                            date: 1
                        }
                    }
                }
            }
        });
        form.verify({
            //content富文本域中的lay-verify值
            content: function (value) {
                layedit.sync(content);
            }
        });
        //保存
        form.on('submit(save)', function (data) {
            var datas = data.field;
            var paperData = layui.table.cache["tableList"]//获取试卷表格数据
            var userData = layui.table.cache["tableUserList"]//获取试卷表格数据
            var src = $(".cursor").attr("src");
/*            if (!src) {
                layer.msg("考试封面未上传！", {icon: 2});
                return false;
            }*/
            if (paperData && paperData.length > 0) {
                datas.totalScore = paperData[0].totalScore;//总分
            } else {
                layer.msg("未选择试卷！", {icon: 2});
                return false;
            }
            if (!userData || userData.length == 0) {
                layer.msg("未选择考试人员！", {icon: 2});
                return false;
            }
            datas.status = '001';
            console.log(datas)
            layerAjax("/exam/list/updateExam", datas, '', function (d) {
                if (d.flag) {
                    layer.msg("保存成功！", {icon: 1});
                    //点击一次关闭
                    $('#btnsubmit').addClass("layui-btn-disabled").attr("disabled", true);
                    $('#btnsave').addClass("layui-btn-disabled").attr("disabled", true);
                    setTimeout(function () {
                        window.parent._showtab('e0652f5faea74175be94ebf0d2a41dd6', '考试列表', '/exam/list/index');
                    }, 1000)
                } else {
                    layer.msg("保存失败！", {icon: 2});
                    $('#btnsubmit').addClass("layui-btn-disabled").attr("disabled", false);
                    $('#btnsave').addClass("layui-btn-disabled").attr("disabled", false);
                    return false;
                }
            })
            return false;
        });
        //提交
        form.on('submit(submit)', function (data) {
            var datas = data.field;
            var src = $(".cursor").attr("src");
/*            if (!src) {
                layer.msg("考试封面未上传", {icon: 2});
                return false;
            }*/
            datas.status = '002';
            var paperData = layui.table.cache["tableList"]//获取试卷表格数据
            var userData = layui.table.cache["tableUserList"]//获取试卷表格数据
            if (paperData && paperData.length > 0) {
                datas.totalScore = paperData[0].totalScore;//总分
            } else {
                layer.msg("未选择试卷！", {icon: 2});
                return false;
            }
            if (!userData || userData.length == 0) {
                layer.msg("未选择考试人员！", {icon: 2});
                return false;
            }
            layerAjax("/exam/list/updateExam", datas, '', function (d) {
                if (d.flag) {
                    layer.msg("提交成功！", {icon: 1});
                    //点击一次关闭
                    $('#btnsubmit').addClass("layui-btn-disabled").attr("disabled", true);
                    $('#btnsave').addClass("layui-btn-disabled").attr("disabled", true);
                    setTimeout(function () {
                        window.parent._showtab('e0652f5faea74175be94ebf0d2a41dd6', '考试列表', '/exam/list/index');
                    }, 1000)
                } else {
                    layer.msg("提交失败！", {icon: 2});
                    $('#btnsubmit').addClass("layui-btn-disabled").attr("disabled", false);
                    $('#btnsave').addClass("layui-btn-disabled").attr("disabled", false);
                    return false;
                }
            })
            return false;
        });

        //试卷
        layui.use('table', function () {
            table = layui.table;
            element = element;
            //方法级渲染
            tableIns = table.render({
                id: 'tableList',
                elem: '#tableList',
                url: '/exam/list/selectExExamPaper?examId=' + $("#examId").val(),
                page: false,
                cols: [[
                    {type: 'checkbox'},
                    {
                        title: '序号', width: '10%', templet: function (res) {
                            return res.LAY_INDEX;
                        }
                    },
                    {field: 'paperId', title: 'ID', hide: true, sort: false},
                    {field: 'paperName', title: '试卷名称', width: '26.5%', sort: false},
                    {field: 'paperType', title: '试卷类型', width: '15%', sort: false},
                    {field: 'paperSort', title: '试卷类别', width: '10%', sort: false},
                    {field: 'totalScore', title: '试卷总分', width: '10%', sort: false},
                    {field: 'totalNum', title: '试题总数', width: '10%', sort: false},
                    {field: 'remark', title: '操作', width: '15.9%', toolbar: "#toolBarRow"}
                ]],
                done: function (res, currentCount) {
                    //***重点***：table渲染完成后渲染element进度条
                    element.render();
                }
            });
            //监听工具条
            table.on('tool(tableList)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delPaper') {
                    delPaper(data);
                } else if (obj.event === 'delUser') {
                    delUser(data);
                }
            });
        });
        //考试人员
        layui.use('table', function () {
            table = layui.table;
            element = element;
            //方法级渲染
            tableUserIns = table.render({
                id: 'tableUserList',
                elem: '#tableUserList',
                url: '/exam/list/selectExStuExam?examId=' + $("#examId").val(),
                page: true,
                cols: [[
                    {type: 'checkbox'},
                    {
                        title: '序号', width: '10%', templet: function (res) {
                            return res.LAY_INDEX;
                        }
                    },
                    {field: 'id', title: 'ID', hide: true, sort: false},
                    {field: 'realName', title: '姓名', width: '20%', sort: false},
                    {field: 'deptName', title: '部门', width: '30%', sort: false},
                    {field: 'value', title: '是否已考试', width: '20%', sort: false},
                    {field: 'remark', title: '操作', width: '17.5%', toolbar: "#toolBarRows"}
                ]],
                done: function (res, currentCount) {
                    //***重点***：table渲染完成后渲染element进度条
                    element.render();

                }
            });
            //监听工具条

        });

        // 上传封面
        var jsondata = {
            type: '101',
            projectId: $("#examId").val()
        }
        var _imgid = 'img';
        layui.use('upload', function () {
            var upload = layui.upload;
            //执行实例
            upload.render({
                elem: '.gr_upload',//绑定元素
                url: '/exam/list/uploadFile',//上传接口
                data: jsondata,
                acceptMime: 'image/*',
                before: function (obj) {
                    var files = this.files = obj.pushFile();
                    jsondata.type = this.type;
                    _imgid = this.imgid;
                    if ('551' == jsondata.type) {
                        var aCertOut = $('#' + _imgid).parents('.a_cert_history');
                        var certId = aCertOut.find('.cert_id_input').val();
                        if (!certId) {
                            certId = $('#' + _imgid).attr('certid');
                        }
                        if (certId) {
                            jsondata.ids = certId;
                        } else {
                            delete jsondata.ids;
                        }
                    } else if ('0819' == jsondata.type || '556' == jsondata.type || "557" == jsondata.type || '558' == jsondata.type) {
                        var suenId = $('input.' + _imgid).val();
                        if (!suenId) {
                            suenId = $('#' + _imgid).attr('certid');
                        }
                        if (suenId) {
                            jsondata.ids = suenId;
                        } else {
                            delete jsondata.ids;
                        }
                    }
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#' + _imgid).attr('src', '');
                        $('#' + _imgid).show();
                        $('#' + _imgid).attr('src', result); //图片链接（base64）
                        if ('208' == jsondata.type) {
                            parent.changeLogo(result);
                        }
                    });
                },
                done: function (res, index) {
                    if (res.flag == true) {
                        if (res.josnObj) {
                            var wordsResult = res.josnObj.words_result;
                            if (wordsResult) {
                                $('#jgcode').val(JSON.stringify(json));
                            }
                            var certId = res.josnObj.certId;
                            if (certId) {
                                $('#' + _imgid).show().attr('certid', certId);
                            }
                        }
                        // $('#'+_imgid).show().attr('src', '');
                        // $('#'+_imgid).show().attr('src', res.data);
                        layer.msg("上传成功", {icon: 1});
                    } else {
                        layer.msg('上传失败' + res.msg);
                    }
                    delete this.files[index];
                },
                error: function () {
                    //请求异常回调
                    var demoText = $('#demoText');
                    layer.msg('上传失败');
                }
            });
        })

    });
    //取消按钮
    $('.close').click(function () {
        window.parent._showtab('e0652f5faea74175be94ebf0d2a41dd6', '考试列表', '/exam/list/index');
    });

    function ks() {
        var current_time = $("#startDate").val();
        var stop_time = $("#endDate").val();
        if (current_time && stop_time) {
            if (!CompareDate(current_time, stop_time)) {
                layer.msg("日期范围不正确！", {icon: 2});
                $("#startDate").val("");
            }
        }
    }

    function js() {
        var current_time = $("#startDate").val();
        var stop_time = $("#endDate").val();
        if (current_time && stop_time) {
            if (!CompareDate(current_time, stop_time)) {
                layer.msg("日期范围不正确！", {icon: 2});
                $("#endDate").val("");
            }
        }
    }

    function CompareDate(d1, d2) {
        return ((new Date(d1.replace(/-/g, "\/"))) < (new Date(d2.replace(/-/g, "\/"))));
    }

    //添加试卷
    function addPaper() {
        var type = "auto";
        var w = "70%";
        var h = "90%";
        url = "/exam/list/exPaper?examId=" + $("#examId").val();
        layer.open({
            id: 'form-add',
            type: 2,
            area: [w, h],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "添加试卷",
            content: url,
            end: function () {
                tableIns.reload();
            }
        });
    }

    //添加考试人员
    function addUser() {
        var type = "auto";
        var w = "70%";
        var h = "90%";
        url = "/exam/list/exUser?examId=" + $("#examId").val();
        layer.open({
            id: 'form-add',
            type: 2,
            area: [w, h],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "添加人员",
            content: url,
            end: function () {
                tableUserIns.reload();
            }
        });
    }

    //删除选中的试卷
    function delPaper(data) {
        layer.confirm('确定删除该试卷吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            layerAjaxGet("/exam/list/deleteExPaper", {
                paperId: data.paperId,
                examId: $("#examId").val()
            }, "", function (d) {
                if (d.flag) {
                    layer.msg("操作成功！", {icon: 1});
                    tableIns.reload();
                } else {
                    layer.msg("操作失败！", {icon: 2});
                }
            })
        });
    }

    let temp = /^[1-9][0-9]*$/; // 非负整数
    function enterScore(obj){
        //let score= $("#passScore").val();
        if (!temp.test(obj.value)) {
            layer.msg('只能为整数');
            obj.value = '';
        }
    }

    //删除选中的考生
    function delUser(data) {
        layer.confirm('确定删除该考生吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            layerAjaxGet("/exam/list/deleteExStu", {userId: data.id, examId: $("#examId").val()}, "", function (d) {
                if (d.flag) {
                    layer.msg("操作成功！", {icon: 1});
                    tableUserIns.reload();
                } else {
                    layer.msg("操作失败！", {icon: 2});
                }
            })
        });
    }


</script>
</body>

</html>
